<template>
  <div class="category-nav">
    <div 
      ref="navContainer" 
      class="nav-container"
      :style="{ cursor: isDragging ? 'grabbing' : 'grab' }"
      @mousedown="startDrag"
      @mousemove="drag"
      @mouseup="endDrag"
      @mouseleave="endDrag"
      @touchstart="touchStart"
      @touchmove.prevent="touchMove"
      @touchend="touchEnd"
    >
      <button 
        class="category-item"
        :class="{ active: activeCategory === 'all' }"
        @click="selectCategory('all')"
      >
        推荐
      </button>
      <button 
        class="category-item"
        :class="{ active: activeCategory === 'anime' }"
        @click="selectCategory('anime')"
      >
        动画
      </button>
      <button 
        class="category-item"
        :class="{ active: activeCategory === 'game' }"
        @click="selectCategory('game')"
      >
        游戏
      </button>
      <button 
        class="category-item"
        :class="{ active: activeCategory === 'music' }"
        @click="selectCategory('music')"
      >
        音乐
      </button>
      <button 
        class="category-item"
        :class="{ active: activeCategory === 'comic' }"
        @click="selectCategory('comic')"
      >
        漫画
      </button>
      <button 
        class="category-item"
        :class="{ active: activeCategory === 'novel' }"
        @click="selectCategory('novel')"
      >
        小说
      </button>
      <button 
        class="category-item"
        :class="{ active: activeCategory === 'entertainment' }"
        @click="selectCategory('entertainment')"
      >
        娱乐
      </button>
      <button 
        class="category-item"
        :class="{ active: activeCategory === 'tech' }"
        @click="selectCategory('tech')"
      >
        科技
      </button>
      <button 
        class="category-item"
        :class="{ active: activeCategory === 'life' }"
        @click="selectCategory('life')"
      >
        生活
      </button>
      <button 
        class="category-item"
        :class="{ active: activeCategory === 'variety' }"
        @click="selectCategory('variety')"
      >
        综艺
      </button>
      <button 
        class="category-item"
        :class="{ active: activeCategory === 'movie' }"
        @click="selectCategory('movie')"
      >
        电影
      </button>
      <button 
        class="category-item"
        :class="{ active: activeCategory === 'tv' }"
        @click="selectCategory('tv')"
      >
        电视剧
      </button>
      <button 
        class="category-item"
        :class="{ active: activeCategory === 'study' }"
        @click="selectCategory('study')"
      >
        学习
      </button>
      <button 
        class="category-item"
        :class="{ active: activeCategory === 'periphery' }"
        @click="selectCategory('periphery')"
      >
        周边
      </button>
      <button 
        class="category-item"
        :class="{ active: activeCategory === 'knowledge' }"
        @click="selectCategory('knowledge')"
      >
        知识
      </button>
      <button 
        class="category-item"
        :class="{ active: activeCategory === 'food' }"
        @click="selectCategory('food')"
      >
        美食
      </button>
      <button 
        class="category-item"
        :class="{ active: activeCategory === 'sports' }"
        @click="selectCategory('sports')"
      >
        运动
      </button>
      <button 
        class="category-item"
        :class="{ active: activeCategory === 'car' }"
        @click="selectCategory('car')"
      >
        汽车
      </button>
      <button 
        class="category-item"
        :class="{ active: activeCategory === 'animal' }"
        @click="selectCategory('animal')"
      >
        动物圈
      </button>
      <button 
        class="category-item"
        :class="{ active: activeCategory === 'acg' }"
        @click="selectCategory('acg')"
      >
        虚拟偶像
      </button>
    </div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'

export default {
  name: 'CategoryNav',
  props: {
    activeCategory: {
      type: String,
      default: 'all',
    },
  },
  setup() {
    const router = useRouter()
    return { router }
  },
  data() {
    return {
      isDragging: false,
      startX: 0,
      scrollLeft: 0,
    }
  },
  methods: {
    // 开始拖动（鼠标）
    startDrag(e) {
      // 确保是鼠标左键点击
      if (e.button !== 0) return
        
      this.isDragging = true
      this.startX = e.clientX
      this.scrollLeft = this.$refs.navContainer.scrollLeft
        
      // 捕获移动事件到document，确保在容器外拖动时也能响应
      document.addEventListener('mousemove', this.handleDocumentMouseMove)
      document.addEventListener('mouseup', this.handleDocumentMouseUp)
    },
      
    // 处理document上的鼠标移动
    handleDocumentMouseMove(e) {
      if (!this.isDragging) return
        
      const x = e.clientX
      const walk = (this.startX - x) * 1.5 // 调整滚动速度
      this.$refs.navContainer.scrollLeft = this.scrollLeft + walk
    },
      
    // 处理document上的鼠标释放
    handleDocumentMouseUp() {
      this.isDragging = false
      document.removeEventListener('mousemove', this.handleDocumentMouseMove)
      document.removeEventListener('mouseup', this.handleDocumentMouseUp)
    },
      
    // 拖动中（容器内）
    drag(e) {
      if (!this.isDragging) return
      e.preventDefault()
    },
      
    // 结束拖动（容器内）
    endDrag() {
      this.isDragging = false
      document.removeEventListener('mousemove', this.handleDocumentMouseMove)
      document.removeEventListener('mouseup', this.handleDocumentMouseUp)
    },
      
    // 开始触摸拖动
    touchStart(e) {
      this.isDragging = true
      this.startX = e.touches[0].clientX
      this.scrollLeft = this.$refs.navContainer.scrollLeft
    },
      
    // 触摸拖动中
    touchMove(e) {
      if (!this.isDragging) return
      e.preventDefault()
      const x = e.touches[0].clientX
      const walk = (this.startX - x) * 1.5
      this.$refs.navContainer.scrollLeft = this.scrollLeft + walk
    },
      
    // 结束触摸拖动
    touchEnd() {
      this.isDragging = false
    },
      
    // 选择分类
    selectCategory(category) {
      this.$emit('categoryChange', category)
      // 根据分类跳转到相应页面
      switch(category) {
        case 'all':
          this.router.push('/')
          break
        case 'discover':
          this.router.push('/discover')
          break
        case 'anime':
          this.router.push('/anime')
          break
        case 'music':
          this.router.push('/music')
          break
        case 'game':
          this.router.push('/game')
          break
        case 'entertainment':
          this.router.push('/entertainment')
          break
        case 'knowledge':
          this.router.push('/knowledge')
          break
        case 'tech':
          this.router.push('/tech')
          break
        case 'life':
          this.router.push('/life')
          break
        case 'variety':
          this.router.push('/variety')
          break
        case 'food':
          this.router.push('/food')
          break
        case 'sports':
          this.router.push('/sports')
          break
        case 'car':
          this.router.push('/car')
          break
        case 'animal':
          this.router.push('/animal')
          break
        case 'movie':
          this.router.push('/movie')
          break
        case 'tv':
          this.router.push('/tv')
          break
        case 'comic':
          this.router.push('/comic')
          break
        case 'novel':
          this.router.push('/novel')
          break
        case 'acg':
          this.router.push('/virtual')
          break
        case 'study':
          this.router.push('/study')
          break
        case 'periphery':
          this.router.push('/periphery')
          break
      }
    },
  },
}
</script>

<style scoped>
.category-nav {
  background-color: var(--card-bg);
  background-image: 
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="10" viewBox="0 0 100 10" preserveAspectRatio="none"><path d="M0,5 C20,0 20,10 40,5 C60,0 60,10 80,5 C100,0 100,10 120,5" fill="none" stroke="rgba(30, 144, 255, 0.1)" stroke-width="2"/></svg>');
  background-size: 100px 10px;
  background-repeat: repeat-x;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 60px;
  z-index: 100;

}



.nav-container {
  display: flex;
  gap: 24px;
  padding: 0 20px;
  overflow-x: auto;
  white-space: nowrap;
  scroll-behavior: smooth;
  height: 56px;
  align-items: center;
}

/* 自定义滚动条样式 */
.nav-container::-webkit-scrollbar {
  height: 6px;
}

.nav-container::-webkit-scrollbar-track {
  background: rgba(30, 144, 255, 0.1);
  border-radius: 3px;
}

.nav-container::-webkit-scrollbar-thumb {
  background: var(--bilibili-pink);
  border-radius: 3px;
  transition: background 0.3s ease;
}

.nav-container::-webkit-scrollbar-thumb:hover {
  background: #E96385;
}

.category-item {
  background: none;
  border: none;
  color: var(--text-color);
  cursor: pointer;
  font-size: 16px;
  padding: 8px 0;
  position: relative;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
}

.category-item:hover {
  color: var(--bilibili-pink);
  font-size: 17px;
  font-weight: 500;
  transform: translateY(-1px);
}

.category-item.active {
  color: var(--bilibili-pink);
  font-weight: 500;
  font-size: 16px;
}

.category-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 3px;
  background-color: var(--bilibili-pink);
  border-radius: 3px;
}



/* 响应式设计 */
@media (max-width: 768px) {
  .nav-container {
    gap: 16px;
    padding: 0 16px;
    height: 48px;
  }
  
  .category-item {
    font-size: 14px;
  }
}
</style>